<template>
  <div class="poscontent">
    <div class="flex flexwrapper headerbox mb_14">
      <div class="headeritem flexcenter mr_15 f-14 commhover" :class="{active:active==1}" @click="handleClick(1)">账户收入</div>
      <!-- <div class="headeritem flexcenter f-14 commhover" :class="{active:active==2}" @click="handleClick(2)">结算记录</div> -->
    </div>
    <account-com v-if="active==1" />
    <jiesuan-record v-if="active==2"  />
  </div>
</template>

<script>
import AccountCom from './AccountCom.vue'
import JiesuanRecord from './JiesuanRecord.vue'
export default {
  data() {
    return {
      active:1,
    };
  },
  components:{
    AccountCom,
    JiesuanRecord
  },
  methods: {
    handleClick(num) {
      this.active = num;
    },

    handleQuery() {},

    getList(){

    },

    handleExport() {},
  },
};
</script>

<style lang="scss" scoped>
.poscontent {
  // 56 导航栏的高 46 tab的高度 35 padding的高度
  height: calc(100vh - 60px);
  padding: 16px 16px 0 16px;
  //   overflow-y: auto;
  overflow-x: hidden;
}
.headeritem {
  width: 105px;
  height: 30px;
  border: 1px solid #1670F1;
  color: #1670F1;

  &.active{
    background-color: #1670F1;
    color: #fff;
  }
}
</style>